<template>
  <div class="app-container">
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @row-update="rowUpdate"
      @current-change="currentChange"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="resetChange"
      @row-save="rowSave"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div v-if="scope.row.icon">
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </div>
      </template>
      <template
        slot-scope="scope"
        slot="edMaxLabel"
      >
        <span>----</span>
      </template>
      <template
        slot-scope="scope"
        slot="lvMaxLabel"
      >
        <span>----</span>
      </template>
      <template
        slot-scope="scope"
        slot="dkqxMaxLabel"
      >
        <span>----</span>
      </template>

      <template
        slot="menu"
        slot-scope="scope"
      >
        <el-button
          size="small"
          type="text"
          @click="viewOpen(scope.row,scope.index)"
          v-if="scope.row.isShow == 1"
          icon="el-icon-view"
        >查看</el-button>
        <el-button
          size="small"
          type="text"
          @click="takeDown(scope.row,scope.index)"
          v-if="scope.row.isShow == 1"
          icon="el-icon-bottom"
        >下架</el-button>
        <el-button
          size="small"
          type="text"
          @click="checkOpen(scope.row,scope.index)"
          icon="el-icon-edit"
          v-if="scope.row.isShow == 0"
        >编辑</el-button>
        <el-button
          size="small"
          type="text"
          @click="rowDel(scope.row)"
          icon="el-icon-delete"
          v-if="scope.row.isShow == 0"
        >删除</el-button>
        <el-button
          size="small"
          type="text"
          @click="takeUp(scope.row)"
          icon="el-icon-top"
          v-if="scope.row.isShow == 0"
        >上架</el-button>
      </template>
    </avue-crud>

  </div>
</template>

<script>
import {
  addRzcp,
  getRzcpList,
  getBank,
  updateRzcp,
  downRzcp,
  showRzcp,
  delRzcp,
} from '@/api/manager.js'

import store from '@/store'
import { getField, downloadTemp } from '@/api/user.js'

export default {
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(rule, value)
      const errStr =
        rule.desc === 'lvMax'
          ? '参考利率'
          : rule.desc === 'edMax'
          ? '贷款额度'
          : '贷款期限'
      if (!value) {
        callback(new Error('请输入' + errStr))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data: [],
      option: {
        headerAlign: 'center',
        dialogMenuPosition:'center',
        align: 'center',
        border: true,
        index: true,
        indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        excelBtn: false,
        selection: false,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        searchShowBtn: false,
        column: [
          {
            label: '产品名称',
            prop: 'productName',
            display: false,
            search: true,
          },
          {
            label: '机构名称',
            prop: 'orgId',
            type: 'select',
            searchValue: '',
            dicData: [],
            display: false,
            search: true,
          },
          {
            label: '产品状态',
            prop: 'isShow',
            type: 'select',
            searchValue: '',
            dicData: [
              {
                label: '全部',
                value: '',
              },
              {
                label: '已上架',
                value: 1,
              },
              {
                label: '未上架',
                value: 0,
              },
            ],
            search: true,
            display: false,
          },
          {
            label: '热门产品',
            prop: 'isHot',
            type: 'select',
            searchValue: '',
            dicData: [
              {
                label: '全部',
                value: '',
              },
              {
                label: '是',
                value: 1,
              },
              {
                label: '否',
                value: 0,
              },
            ],
            display: false,
            search: true,
          },
        ],
        group: [
          {
            //icon: 'el-icon-info',
            //label: '企业信息',
            labelSuffix: '0.0',
            collapse: true,
            column: [
              {
                label: '产品名称',
                prop: 'productName',
                rules: [
                  {
                    required: true,
                    message: '产品名称',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '机构名称',
                prop: 'orgId',
                type: 'select',
                dicData: [],
                rules: [
                  {
                    required: true,
                    message: '机构名称',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '贷款额度(万元)',
                prop: 'edMin',
                placeholder: '请输入贷款额度',
                span: 7,
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入贷款额度',
                    trigger: 'blur',
                  },
                ],
              },
              {
                labelslot: true,
                label: '贷款额度(万元)',
                prop: 'edMax',
                span: 5,
                placeholder: '请输入贷款额度',
                labelWidth: '36',
                type: 'number',
                rules: [
                  { validator: validatePass, trigger: 'blur', desc: 'edMax' },
                ],
              },
              {
                label: '参考利率类型',
                prop: 'lvType',
                type: 'select',
                dicData: [
                  {
                    label: '年利率',
                    value: '年利率',
                  },
                  {
                    label: '月利率',
                    value: '月利率',
                  },
                  {
                    label: '日利率',
                    value: '日利率',
                  },
                ],
                rules: [
                  {
                    required: true,
                    message: '请输入参考利率类型',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '参考利率(%)',
                prop: 'lvMin',
                placeholder: '请输入参考利率',
                span: 7,
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入参考利率',
                    trigger: 'blur',
                  },
                ],
              },
              {
                labelslot: true,
                prop: 'lvMax',
                span: 5,
                placeholder: '请输入参考利率',
                labelWidth: '36',
                type: 'number',
                rules: [
                  { validator: validatePass, trigger: 'blur', desc: 'lvMax' },
                ],
              },
              {
                label: '贷款期限(月)',
                prop: 'dkqxMin',
                placeholder: '请输入贷款期限',
                span: 7,
                type: 'number',
                rules: [
                  {
                    required: true,
                    message: '请输入贷款期限',
                    trigger: 'blur',
                  },
                ],
              },
              {
                labelslot: true,
                prop: 'dkqxMax',
                span: 5,
                placeholder: '请输入贷款期限',
                labelWidth: '36',
                type: 'number',
                rules: [
                  { validator: validatePass, trigger: 'blur', desc: 'dkqxMax' },
                ],
              },
              {
                label: '担保方式',
                prop: 'infoDbfs',
                type: 'select',
                dicData: [],
                rules: [
                  {
                    required: true,
                    message: '请输入担保方式',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '适用区域',
                prop: 'infoArea',
                type: 'select',
                multiple: true,
                dicData: [],
                rules: [
                  {
                    required: true,
                    message: '请输入适用区域',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '适用客户',
                prop: 'infoSykh',
                rules: [
                  {
                    required: true,
                    message: '请输入适用客户',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '联系电话',
                prop: 'infoLxfs',
                rules: [
                  {
                    required: true,
                    message: '请输入联系电话',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '产品介绍',
                prop: 'productIntroduction',
                type: 'textarea',
                rules: [
                  {
                    required: true,
                    message: '请输入产品介绍',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '申请条件',
                prop: 'applyTerm',
                type: 'textarea',
                rules: [
                  {
                    required: true,
                    message: '请输入申请条件',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '申请材料',
                prop: 'applyData',
                type: 'textarea',
                rules: [
                  {
                    required: true,
                    message: '请输入申请材料',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '是否热门产品',
                prop: 'isHot',
                type: 'select',
                dicData: [
                  {
                    label: '是',
                    value: 1,
                  },
                  {
                    label: '否',
                    value: 0,
                  },
                ],
                rules: [
                  {
                    required: true,
                    message: '请输入热门产品',
                    trigger: 'blur',
                  },
                ],
              },
              {
                label: '产品排序',
                prop: 'sortNum',
                type: 'number',
              },
            ],
          },
        ],
      },
    }
  },
  created() {
    this.roleId = this.$store.getters.roleId

    //获取担保方式
    getField({
      page: 1,
      size: 1000,
      code: 'guarantee_type',
    }).then((res) => {
      console.log('guarantee_type', res.data.records)
      const options = [
        { label: '不限', value: 'all' },
        ...res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        }),
      ]
      this.option.group[0].column.find(
        (item) => item.prop == 'infoDbfs'
      ).dicData = options
    })
    //获取适用区域
    getField({
      page: 1,
      size: 1000,
      code: 'NTAREA',
    }).then((res) => {
      console.log('NTAREA', res.data.records)
      const options = [
        { label: '不限', value: 'all' },
        ...res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        }),
      ]
      this.option.group[0].column.find(
        (item) => item.prop == 'infoArea'
      ).dicData = options
    })
    getBank().then((res) => {
      this.bankOpt = res.data.map((item) => {
        return { label: item.org_name, value: item.org_id }
      })
      const options = [{ label: '不限', value: '' }, ...this.bankOpt]
      this.option.column.find((item) => item.prop === 'orgId').dicData = options
      this.option.group[0].column.find((item) => item.prop == 'orgId').dicData =
        this.bankOpt
    })
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    filterQylx(val, qylxList) {
      if (!val) return
      var isnum = /^\d+$/.test(val)
      if (isnum) {
        return qylxList.filter((item) => item.fieldCode == val)[0].fieldName
      } else {
        return val
      }
    },
  },
  methods: {
    onLoad(page, params = {}) {
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      this.loading = true
      getRzcpList(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records.map((i) => {
            return {
              ...i,
              infoArea: !i.infoArea ? 'all' : i.infoArea,
              infoDbfs: !i.infoDbfs ? 'all' : i.infoDbfs,
            }
          })
          this.page.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 新增 */
    rowSave(row, done, loading) {
      row.infoArea.includes('all')
        ? (row.infoArea = null)
        : (row.infoArea = row.infoArea.toString())
      row.infoDbfs == 'all' ? (row.infoDbfs = null) : ''
      row.orgName = this.bankOpt.find((item) => item.value === row.orgId).label
      console.log('rowSave', row)
      addRzcp(row).then(
        (data) => {
          if (data.status) {
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
            this.onLoad(this.page)
          }
          done()
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 编辑 */
    checkOpen(row, type) {
      this.$refs.crud.rowEdit(row, row.$index)
    },
    //查看
    viewOpen(row, type) {
      this.$refs.crud.rowView(row, row.$index)
    },
    /* 修改 */
    rowUpdate(row, index, done, loading) {
      console.log(row, done, loading)
      row.infoArea.includes('all')
        ? (row.infoArea = null)
        : (row.infoArea = row.infoArea.toString())
      row.infoDbfs == 'all' ? (row.infoDbfs = null) : ''
      row.orgName = this.bankOpt.find((item) => item.value === row.orgId).label
      updateRzcp(row).then(
        (res) => {
          if (res.status) {
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: res.msg,
            })
            done()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    takeDown(row, type) {
      this.$confirm('是否下架该产品?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        downRzcp({ id: row.id }).then(
          (res) => {
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.onLoad(this.page)
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.loading = false
          },
          (error) => {
            window.console.log(error)
          }
        )
      })
    },
    takeUp(row) {
      this.$confirm('是否上架该产品?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        showRzcp({ id: row.id }).then(
          (res) => {
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.onLoad(this.page)
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.loading = false
          },
          (error) => {
            window.console.log(error)
          }
        )
      })
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('是否删除该产品?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        delRzcp({ id: row.id }).then(
          (res) => {
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.onLoad(this.page)
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.loading = false
          },
          (error) => {
            window.console.log(error)
          }
        )
      })
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
</style>
